<script setup>
import { ref } from "vue";

const theme = ref("");
const themeOptions = ref([
  {
    label: "默认",
    value: "",
  },
  {
    label: "暗黑",
    value: "dark",
  },
  {
    label: "火山红",
    value: "red",
  },
]);
const fontSize = ref("16px");
const fontSizeOptions = ref([
  {
    label: "16px",
    value: "16px",
  },
  {
    label: "18px",
    value: "18px",
  },
  {
    label: "20px",
    value: "20px",
  },
]);
// 修改主题
const changeTheme = () => {
  document.querySelector("html").className = theme.value;
};
// 修改字体大小
const changeFontSize = () => {
  window.document.documentElement.setAttribute("fontSize", fontSize.value);
};
</script>

<template>
  <div>
    <div class="nav">中国</div>
    <el-select v-model="theme" @change="changeTheme()">
      <el-option
        v-for="(item, index) in themeOptions"
        :label="item.label"
        :value="item.value"
        :key="index"
      ></el-option>
    </el-select>
    <el-select v-model="fontSize" @change="changeFontSize()">
      <el-option
        v-for="(item, index) in fontSizeOptions"
        :label="item.label"
        :value="item.value"
        :key="index"
      ></el-option>
    </el-select>
    <el-button type="primary">按钮</el-button>
  </div>
</template>

<style scoped>
.nav {
  width: 100px;
  height: 50px;
  background: var(--bg-color);
  color: white;
  text-align: center;
  line-height: 50px;
  font-size: var(--fontSize);
}
</style>
